<template>
	<view class="container999">
		<view class="title">预约维修服务</view>
		<view class='line'>
			<view class='lineLeft'>车牌号：</view>
			<view class="lineRight" @click="show = true">
				<UPicker :closeOnClickOverlay="closeOnClickOverlay" :show="show" keyName="name" :columns="daindongche"
					@cancel="show = false" @confirm="changeName"></UPicker>
				<view class="text">
					{{form.chepai?form.chepai:''}}
				</view>
				<image src="../../static/you.png" class="youImg" mode=""></image>
			</view>
		</view>
		<view class='line'>
			<view class='lineLeft'>维修部位</view>
			<view class="lineRight">
				<input class="input" v-model="form.weixiubuwei" data-name="phone" placeholder-class="plaClass"
					placeholder='请输入维修部位'></input>
			</view>
		</view>
		<view class='line' @click="showTime = true">
			<view class='lineLeft'>预约日期：</view>
			<view class="lineRight">
				<view class="text">
					{{form.time?form.time:''}}
				</view>
				<UCalendar :show="showTime" @close="showTime = false" @confirm="cgnTime"></UCalendar>
				<image src="../../static/you.png" class="youImg" mode=""></image>
			</view>
		</view>
		<view class="buttonBox" @click="saveProfile">
			提交
		</view>
	</view>
</template>



<script>
	import {
		userinfo,
		diandongche,
		weixiuAdd
	} from "@/request/API/xinwentongzhi/index";
	import uploadFile from '@/components/uploadFile.vue'
	import UCalendar from '@/uni_modules/uview-ui/components/u-calendar/u-calendar.vue';
	import UPicker from "@/uni_modules/uview-ui/components/u-picker/u-picker.vue"
	export default {
		components: {
			uploadFile
		},
		data() {
			return {
				form: {
					chepai: '请选择车牌号！',
					time: '请选择预约时间！'
				},
				obj: {},
				xingming: '',
				show: false,
				showTime: false,
				closeOnClickOverlay: true,
				daindongche: [],
			};
		},
		onLoad() {
			this.obj = uni.getStorageSync("user");
			this.xingming = this.obj.yonghuming
			this.form.yonghuming = this.obj.xingming
		},
		onShow() {
			this.diandongche()
		},
		methods: {
			changeName(row) {
				this.form.chepai = row.value[0].name
				this.show = false
				console.log(row.value[0].name)
			},
			cgnTime(row) {
				this.form.time = row[0]
				this.showTime = false
				console.log(row[0])
			},
			diandongche() {
				diandongche({
					xingming: this.obj.xingming
				}).then(res => {
					this.daindongche = [res.data.list];
					console.log(this.daindongche)
				})
			},
			saveProfile() {
				weixiuAdd(this.form).then(res => {
					if (!Number(res.code)) {
						uni.showToast({
							title: '预约信息已提交！',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
						this.form = {}
					}
				})
			}
		}
	};
</script>
<style lang="scss">
	.plaClass {
		// color: #8;
	}



	.container999 {
		.title {
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 4%;
			border-bottom: 1px solid #f5f5f5;
		}

		.buttonBox {
			width: 91%;
			margin: 0 auto;
			height: 84rpx;
			border-radius: 84rpx;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 100rpx;
			left: 0;
			right: 0;
			background-color: #ff573a;
		}

		.tri {
			width: 0;
			height: 0;
			border-left: 8rpx solid transparent;
			border-right: 8rpx solid transparent;
			right: 30rpx !important;
			border-top: 16rpx solid #545151;
		}

		.line {
			margin-top: 30rpx;
			height: 100rpx;
			width: 92%;
			margin: 0 auto;
			border-bottom: 1px solid #f5f5f5;
			display: flex;

			.lineRight {
				position: relative;

				.text {
					position: absolute;
					left: 0;
				}

				.youImg {
					width: 26rpx;
					height: 27rpx;
					position: absolute;
					right: 0;
				}

				.tips {
					color: #9a9a9c;
					font-weight: bold;
				}

				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
			}

			.lineLeft {
				display: flex;
				width: 20%;
				align-items: center;
				height: 100%;
				font-weight: bold;
				color: #000000;
			}

			.input {
				padding-right: 20rpx;
				height: 100%;
				width: 70%;
				text-align: left;
				font-size: 28rpx;
				color: #545151;
			}

			.picker {
				height: 100%;
				justify-content: flex-start;
				display: flex;
				align-content: center;
				width: 500rpx;
			}

			picker {
				height: 84rpx;
				line-height: 84rpx;
			}
		}

		width: 100vw;
		font-size: 28upx;
		min-height: 100vh;
		overflow: hidden;
		color: #6b8082;
		position: relative;
	}
</style>